import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import Link from "next/link"

// 模拟的歌手数据
const featuredArtists = [
  {
    id: 1,
    name: "周杰伦",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 2,
    name: "林俊杰",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 3,
    name: "陈奕迅",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 4,
    name: "薛之谦",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 5,
    name: "汪苏泷",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 6,
    name: "G.E.M.邓紫棋",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 7,
    name: "王力宏",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 8,
    name: "陈粒",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 9,
    name: "周深",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
  {
    id: 10,
    name: "王源",
    avatar: "https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image-MubZDjbVQ9NBB2nWpzT9Z7lu14V8Xy.png",
  },
]

const otherArtists = [
  ["张杰", "许嵩", "毛不易", "王菲", "张碧晨"],
  ["李荣浩", "蔡健雅", "孙燕姿", "单依纯", "赵雷"],
  ["Taylor Swift", "五月天", "梁静茹", "张韶涵", "BEYOND"],
  ["周传雄", "方大同", "张学友", "BIGBANG", "杨宗纬"],
  ["EXO", "曾指儿", "郭顶", "徐佳莹", "张靓颖"],
  ["A-Lin", "蔡依林", "莫文蔚", "吴艾嘉", "胡彦斌"],
]

export function ArtistGrid() {
  return (
    <div className="space-y-12">
      {/* 精选歌手网格 */}
      <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8">
        {featuredArtists.map((artist) => (
          <Link key={artist.id} href={`/artist/${artist.id}`} className="group flex flex-col items-center">
            <Avatar className="h-32 w-32 md:h-40 md:w-40">
              <AvatarImage src={artist.avatar} alt={artist.name} />
              <AvatarFallback>{artist.name[0]}</AvatarFallback>
            </Avatar>
            <div className="mt-4 text-center">
              <h3 className="font-medium group-hover:text-primary transition-colors">{artist.name}</h3>
            </div>
          </Link>
        ))}
      </div>

      {/* 更多歌手列表 */}
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
        {otherArtists.map((column, columnIndex) => (
          <div key={columnIndex} className="space-y-4">
            {column.map((artist, artistIndex) => (
              <Link
                key={artistIndex}
                href={`/artist/${columnIndex}-${artistIndex}`}
                className="block text-sm text-muted-foreground hover:text-primary transition-colors"
              >
                {artist}
              </Link>
            ))}
          </div>
        ))}
      </div>
    </div>
  )
}

